import { IGroup, NodeConfig, registerNode } from '@antv/g6';
import { colors, preset } from 'tailwind-preset';

import { Mode, THEME_LIGHT } from '@/theme/ThemeContext';
import { abbreviateNumber } from '@/utils/number';

export type TopAttackPathsNodeModelConfig = NodeConfig & {
  id: string;
  label: string;
  cve_id: string[];
  cve_attack_vector: string;
  ports: string[];
  direction: 'LR' | 'TB';
  theme: Mode;
};

registerNode(
  'top-attack-paths-graph-node',
  {
    afterDraw(_cfg, _group) {
      const cfg = _cfg as TopAttackPathsNodeModelConfig;
      const isLightTheme = cfg.theme === THEME_LIGHT;
      const color = colors[isLightTheme ? 'variables' : 'darkVariables'].DEFAULT;
      const group = _group as IGroup;
      const mainOpacity = 0.9;
      if (cfg.cve_id.length) {
        const text = `${abbreviateNumber(cfg.cve_id.length)}`;
        group?.addShape('rect', {
          attrs: {
            width: 28 + text.length * 4,
            height: 16,
            x: 8,
            y: -22,
            fill: isLightTheme ? color['brand-error'] : color['btn-red'],
            lineWidth: 0.3,
            radius: [8],
            opacity: mainOpacity,
            cursor: 'pointer',
          },
          draggable: true,
        });
        group?.addShape('image', {
          attrs: {
            x: 12,
            y: -19,
            width: 10,
            height: 10,
            img: isLightTheme ? VulnerabilityIconLight : VulnerabilityIconDark,
          },
          // must be assigned in G6 3.3 and later versions. it can be any value you want
          name: 'issue-image',
        });
        group?.addShape('text', {
          attrs: {
            x: 24,
            y: -12.5,
            fontSize: 11,
            lineHeight: 16,
            fontWeight: 600,
            fill: color['text-text-inverse'],
            opacity: mainOpacity,
            textBaseline: 'middle',
            text,
            fontFamily: preset.theme.extend.fontFamily.body.join(','),
          },
          name: 'total-count',
          draggable: true,
        });
      }
    },
    getAnchorPoints(_cfg) {
      const cfg = _cfg as TopAttackPathsNodeModelConfig;
      if (cfg.direction === 'LR') {
        return [
          [0, 0.5],
          [1, 0.5],
        ];
      }
      return [
        [0.5, 0], // The center of the left border
        [0.5, 1], // The center of the right border
      ];
    },
  },
  'circle',
);

const VulnerabilityIconLight = `data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.39443 2.97778C6.62055 2.9592 6.83204 2.8584 6.98887 2.69444C7.25926 2.84674 7.48522 3.06696 7.64443 3.33333C7.09117 3.80764 6.59689 4.34668 6.17221 4.93889C5.92239 5.27634 5.88412 5.7258 6.0733 6.10063C6.26248 6.47546 6.64678 6.71164 7.06665 6.71111H12.9555C13.3715 6.71197 13.7531 6.48044 13.9444 6.11111C14.1369 5.73582 14.1004 5.28388 13.85 4.94444C13.4206 4.34919 12.9207 3.80821 12.3611 3.33333C12.5218 3.07581 12.7455 2.86356 13.0111 2.71667C13.307 3.01872 13.7689 3.08414 14.137 2.87612C14.5051 2.6681 14.6874 2.23861 14.5813 1.82933C14.4752 1.42004 14.1072 1.13321 13.6844 1.13025C13.2616 1.12728 12.8896 1.40891 12.7778 1.81667C12.3242 2.02592 11.939 2.35909 11.6666 2.77778C11.1843 2.44877 10.6217 2.25677 10.0389 2.22222C9.44274 2.25032 8.86597 2.44258 8.37221 2.77778C8.08934 2.35342 7.69004 2.0197 7.22221 1.81667C7.09969 1.33688 6.62381 1.03629 6.13792 1.13177C5.65203 1.22725 5.32529 1.68557 5.39344 2.17604C5.46159 2.66651 5.90091 3.01838 6.39443 2.97778ZM9.99998 3.37222C10.8055 3.37222 11.9611 4.24444 12.95 5.59444H7.06109C8.04998 4.23889 9.19998 3.37222 9.99998 3.37222ZM16.1111 11.1111H17.1278C17.4346 11.1111 17.6833 11.3598 17.6833 11.6667C17.6833 11.9735 17.4346 12.2222 17.1278 12.2222H16.0778C16.0296 13.4203 15.7165 14.5929 15.1611 15.6556L16.1944 16.3778C16.3572 16.4919 16.4467 16.6842 16.4292 16.8822C16.4118 17.0802 16.29 17.2539 16.1098 17.3378C15.9296 17.4216 15.7183 17.403 15.5555 17.2889L14.5222 16.5833C13.4142 17.9387 11.7505 18.7174 9.99998 18.7C8.24369 18.7181 6.57487 17.9348 5.46665 16.5722L4.44443 17.2889C4.28448 17.4335 4.05527 17.4725 3.85648 17.389C3.65768 17.3054 3.52522 17.1143 3.51668 16.8988C3.50815 16.6833 3.62509 16.4824 3.81665 16.3833L4.86665 15.65C4.31027 14.5894 3.99535 13.4188 3.94443 12.2222H2.87221C2.56538 12.2222 2.31665 11.9735 2.31665 11.6667C2.31665 11.3598 2.56538 11.1111 2.87221 11.1111H3.92776C3.9845 10.0248 4.20553 8.95339 4.58332 7.93333L3.74998 7.48889C3.47998 7.34315 3.37924 7.00612 3.52498 6.73611C3.67073 6.4661 4.00776 6.36537 4.27776 6.51111L5.96109 7.43333C5.35218 8.708 5.02441 10.0987 4.99998 11.5111C4.99998 15 6.78887 17.3389 9.55554 17.5667V8.33333H10.4444V17.5667C13.2222 17.35 15 15 15 11.5111C14.9891 10.0972 14.6727 8.70235 14.0722 7.42222L15.7389 6.51111C16.0089 6.36537 16.3459 6.4661 16.4916 6.73611C16.6374 7.00612 16.5367 7.34315 16.2667 7.48889L15.4555 7.92778C15.8346 8.94939 16.0557 10.0228 16.1111 11.1111ZM7.77221 15.2556C8.25699 15.2556 8.64998 14.8626 8.64998 14.3778C8.64998 13.893 8.25699 13.5 7.77221 13.5C7.28742 13.5 6.89443 13.893 6.89443 14.3778C6.89443 14.8626 7.28742 15.2556 7.77221 15.2556ZM8.22776 9.85555C8.22776 10.4539 7.74274 10.9389 7.14443 10.9389C6.54612 10.9389 6.06109 10.4539 6.06109 9.85555C6.06109 9.25725 6.54612 8.77222 7.14443 8.77222C7.74274 8.77222 8.22776 9.25725 8.22776 9.85555ZM12.4555 15.2556C12.9403 15.2556 13.3333 14.8626 13.3333 14.3778C13.3333 13.893 12.9403 13.5 12.4555 13.5C11.9708 13.5 11.5778 13.893 11.5778 14.3778C11.5778 14.8626 11.9708 15.2556 12.4555 15.2556ZM14.1722 9.85555C14.1722 10.4539 13.6872 10.9389 13.0889 10.9389C12.4906 10.9389 12.0055 10.4539 12.0055 9.85555C12.0055 9.25725 12.4906 8.77222 13.0889 8.77222C13.6872 8.77222 14.1722 9.25725 14.1722 9.85555Z" fill="white"/>
</svg>`;

const VulnerabilityIconDark = `data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.39443 2.97778C6.62055 2.9592 6.83204 2.8584 6.98887 2.69444C7.25926 2.84674 7.48522 3.06696 7.64443 3.33333C7.09117 3.80764 6.59689 4.34668 6.17221 4.93889C5.92239 5.27634 5.88412 5.7258 6.0733 6.10063C6.26248 6.47546 6.64678 6.71164 7.06665 6.71111H12.9555C13.3715 6.71197 13.7531 6.48044 13.9444 6.11111C14.1369 5.73582 14.1004 5.28388 13.85 4.94444C13.4206 4.34919 12.9207 3.80821 12.3611 3.33333C12.5218 3.07581 12.7455 2.86356 13.0111 2.71667C13.307 3.01872 13.7689 3.08414 14.137 2.87612C14.5051 2.6681 14.6874 2.23861 14.5813 1.82933C14.4752 1.42004 14.1072 1.13321 13.6844 1.13025C13.2616 1.12728 12.8896 1.40891 12.7778 1.81667C12.3242 2.02592 11.939 2.35909 11.6666 2.77778C11.1843 2.44877 10.6217 2.25677 10.0389 2.22222C9.44274 2.25032 8.86597 2.44258 8.37221 2.77778C8.08934 2.35342 7.69004 2.0197 7.22221 1.81667C7.09969 1.33688 6.62381 1.03629 6.13792 1.13177C5.65203 1.22725 5.32529 1.68557 5.39344 2.17604C5.46159 2.66651 5.90091 3.01838 6.39443 2.97778ZM9.99998 3.37222C10.8055 3.37222 11.9611 4.24444 12.95 5.59444H7.06109C8.04998 4.23889 9.19998 3.37222 9.99998 3.37222ZM16.1111 11.1111H17.1278C17.4346 11.1111 17.6833 11.3598 17.6833 11.6667C17.6833 11.9735 17.4346 12.2222 17.1278 12.2222H16.0778C16.0296 13.4203 15.7165 14.5929 15.1611 15.6556L16.1944 16.3778C16.3572 16.4919 16.4467 16.6842 16.4292 16.8822C16.4118 17.0802 16.29 17.2539 16.1098 17.3378C15.9296 17.4216 15.7183 17.403 15.5555 17.2889L14.5222 16.5833C13.4142 17.9387 11.7505 18.7174 9.99998 18.7C8.24369 18.7181 6.57487 17.9348 5.46665 16.5722L4.44443 17.2889C4.28448 17.4335 4.05527 17.4725 3.85648 17.389C3.65768 17.3054 3.52522 17.1143 3.51668 16.8988C3.50815 16.6833 3.62509 16.4824 3.81665 16.3833L4.86665 15.65C4.31027 14.5894 3.99535 13.4188 3.94443 12.2222H2.87221C2.56538 12.2222 2.31665 11.9735 2.31665 11.6667C2.31665 11.3598 2.56538 11.1111 2.87221 11.1111H3.92776C3.9845 10.0248 4.20553 8.95339 4.58332 7.93333L3.74998 7.48889C3.47998 7.34315 3.37924 7.00612 3.52498 6.73611C3.67073 6.4661 4.00776 6.36537 4.27776 6.51111L5.96109 7.43333C5.35218 8.708 5.02441 10.0987 4.99998 11.5111C4.99998 15 6.78887 17.3389 9.55554 17.5667V8.33333H10.4444V17.5667C13.2222 17.35 15 15 15 11.5111C14.9891 10.0972 14.6727 8.70235 14.0722 7.42222L15.7389 6.51111C16.0089 6.36537 16.3459 6.4661 16.4916 6.73611C16.6374 7.00612 16.5367 7.34315 16.2667 7.48889L15.4555 7.92778C15.8346 8.94939 16.0557 10.0228 16.1111 11.1111ZM7.77221 15.2556C8.25699 15.2556 8.64998 14.8626 8.64998 14.3778C8.64998 13.893 8.25699 13.5 7.77221 13.5C7.28742 13.5 6.89443 13.893 6.89443 14.3778C6.89443 14.8626 7.28742 15.2556 7.77221 15.2556ZM8.22776 9.85555C8.22776 10.4539 7.74274 10.9389 7.14443 10.9389C6.54612 10.9389 6.06109 10.4539 6.06109 9.85555C6.06109 9.25725 6.54612 8.77222 7.14443 8.77222C7.74274 8.77222 8.22776 9.25725 8.22776 9.85555ZM12.4555 15.2556C12.9403 15.2556 13.3333 14.8626 13.3333 14.3778C13.3333 13.893 12.9403 13.5 12.4555 13.5C11.9708 13.5 11.5778 13.893 11.5778 14.3778C11.5778 14.8626 11.9708 15.2556 12.4555 15.2556ZM14.1722 9.85555C14.1722 10.4539 13.6872 10.9389 13.0889 10.9389C12.4906 10.9389 12.0055 10.4539 12.0055 9.85555C12.0055 9.25725 12.4906 8.77222 13.0889 8.77222C13.6872 8.77222 14.1722 9.25725 14.1722 9.85555Z" fill="black"/>
</svg>`;
